<template>
	<view class="page page-pickupproduct">

		<view class="list-wrap" v-if="list.length">
			<view class="item" v-for="(i,k) in list" :key="i.id">
				<view flex items-center pt-5px pb5px>
					<view class="icon icon-time"></view>
					<view text-sm ml-10px>发布时间： {{i.created_at}}</view>
				</view>
				<view flex items-center pt-5px pb5px>
					<view class="icon icon-name"></view>
					<view text-sm ml-10px>商品名称： {{i.name}}</view>
				</view>
				<view flex items-center pt-5px pb5px>
					<view class="icon icon-num"></view>
					<view text-sm ml-10px>数量： {{i.num}}</view>
				</view>
				<view flex items-center pt-5px pb5px v-if="i.ageing_name">
					<view class="icon icon-time"></view>
					<view text-sm ml-10px>时效： {{i.ageing_name}}</view>
				</view>
				<view flex items-center pt-5px pb5px>
					<view class="icon icon-enterprise"></view>
					<view text-sm ml-10px>企业名称： {{i.firm_name}}</view>
				</view>
				<view flex items-center pt-5px pb5px>
					<view class="icon icon-avatar"></view>
					<view text-sm ml-10px>联系人： {{i.contact_name}}</view>
				</view>
				<view class="image-wrap" v-if="i.images.length">
					<image 
						v-for="(item,k) in i.images" :key="k"
						class="image"
						:src="item"
						mode="aspectFill"
					/>
					<view class="image" v-if="i.images.length%3 == 2"></view>
				</view>
				<view class="btn" @click.stop="go_pickupsale(i)">我要跟采</view>

				<divider spacing="10px"></divider>
			</view>
		</view>

		<view v-else-if="!loading" flex items-center justify-center flex-col pt-100px color-gray>
			<view class="icon icon-nodata text-8xl"></view>
			<view pt-10px>暂无数据</view>
		</view>
	</view>

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { useUserStore } from '@/stores/user'
	const user = useUserStore()

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loadedAll = ref(false)
	const loading = ref(false)
	const list = ref([])

	const go_pickupsale = item => {
		if(!user.mobile) {
			show_auth.value = true
			return
		}
		uni.navigateTo({
			url: `/pages/pickupsale/index?type=0&id=${item.id}&name=${item.name}`
		})
	}


	async function fn(){
		getList()
	}
	fn()

	async function getList() {
		if(loadedAll.value) return
		if(loading.value) return
		loading.value = true
		const data = await api.pickupList({
			page_size: page_size.value,
			page_no: page_no.value,
		})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}


</script>

<style lang="scss">
.page-pickupproduct {

	.list-wrap {
		padding: 15px;
		.item {
			position: relative;
			.btn {
				position: absolute;
				top: 150upx;
				right: 10upx;
				z-index: 2;
				padding: 10upx 30upx;
				color: white;
				background-color: $uni-color-navigator;
				border-radius: 100px;
				text-align: center;
			}
		}

		.image-wrap {
			display: flex;
			padding: 10upx 0;
			justify-content: space-between;
			.image {
				width: 32%;
				height: auto;
				aspect-ratio: 3/4;
				border-radius: 4px;
			}
		}
	}
}

</style>

